<template>
  <div class="head">
    <div class="topic">
      <img
        src="../../assets/img/Scyphozoa.png"
        alt=""
        style="width: 140px; height: 140px; margin-top: 80px"
      />
      <div class="" style="width: 300px; margin: 0 auto">
        <el-row>
          <el-col :span="4" :offset="2">
            <el-link href="" :underline="false"
              ><span class="linktitle">歌手</span></el-link
            ></el-col
          >
          <el-col :span="4" :offset="4"
            ><el-link href="" :underline="false"
              ><span class="linktitle">风格</span></el-link
            ></el-col
          >
          <el-col :span="4" :offset="4"
            ><el-link href="" :underline="false"
              ><span class="linktitle">热门</span></el-link
            ></el-col
          >
        </el-row>
      </div>
      <input type="text" placeholder="搜索" class="homesearch" />
    </div>
    <div class="topic1">
      <div class="listrecommend">
        <el-container>
          <el-aside width="200px" class="listrecommendtitle"
            ><span style="width: 52px; margin: 0 auto; line-height: 56px"
              >歌单推荐</span
            ></el-aside
          >
          <el-container>
            <el-header
              ><div class="recommendlist1">
                <el-container>
                  <el-main style="width: 10%"
                    ><img
                      :src="listRecommend[0].cover"
                      alt=""
                      class="listcover"
                  /></el-main>
                  <el-main
                    ><div class="listmusic">
                      <p class="listtitle">{{ listRecommend[0].listTitle }}</p>
                      <p class="playnum">
                        播放量 : {{ listRecommend[0].listPlayNum }}
                      </p>
                      <p
                        class="music"
                        v-for="(music, index) in listRecommend[0].music"
                        :key="index"
                      >
                        {{ index + 1 }}、{{ music.music_name }}
                        <span class="music_desc">{{
                          music.music_describe
                        }}</span>
                      </p>
                    </div></el-main
                  ></el-container
                >
              </div></el-header
            >
            <el-footer
              ><div class="recommendlist2">
                <el-container
                  ><el-main style="width: 10%"
                    ><img
                      :src="listRecommend[0].cover"
                      alt=""
                      class="listcover"
                  /></el-main>
                  <el-main
                    ><div class="listmusic">
                      <p class="listtitle">{{ listRecommend[0].listTitle }}</p>
                      <p class="playnum">
                        播放量 : {{ listRecommend[0].listPlayNum }}
                      </p>
                      <p
                        class="music"
                        v-for="(music, index) in listRecommend[0].music"
                        :key="index"
                      >
                        {{ index + 1 }}、{{ music.music_name }}
                        <span class="music_desc">{{
                          music.music_describe
                        }}</span>
                      </p>
                    </div></el-main
                  ></el-container
                >
              </div></el-footer
            >
          </el-container>
        </el-container>
      </div>
    </div>
    <div class="topic2">
      <h1 style="font-size: 50px">新歌推荐</h1>
      <div class="newmusicbox">
        <div
          class="newmusic"
          v-for="(music, index) in newMusicRecommend"
          :key="index"
        >
          <el-container
            ><el-main
              ><img
                :src="music.cover"
                alt=""
                style="width: 160px; height: 160px" /></el-main
            ><el-main class="newmusiccontent"
              ><div style="text-align: left">
                <p style="font-size: 20px; font-weight: bold">
                  {{ music.music_name }}
                </p>
                <p
                  style="
                    font-size: 20px;
                    font-weight: bold;
                    opacity: 40%;
                    margin-top: -20px;
                  "
                >
                  {{ music.player }}
                </p>
              </div></el-main
            ></el-container
          >
        </div>
      </div>
    </div>
    <div class="topic3">
      <div class="listrecommend">
        <el-container style="width: 100%">
          <el-main width="" class="rank" style="background-color: #be7ba6"
            ><span class="toprank">巅峰榜</span><br /><span class="topranktitle"
              >新歌</span
            ><br /><br /><span class="--">——</span>
            <p
              v-for="(music, index) in newMusicRank"
              :key="index"
              style="
                font-size: 16px;
                color: white;
                text-align: left;
                margin-left: 20px;
              "
            >
              <span>{{ index + 1 }} {{ music.music_name }}</span
              ><br /><span style="margin-left: 13px">{{ music.player }}</span>
            </p> </el-main
          ><el-main width="" class="rank" style="background-color: #6494c1"
            ><span class="toprank">巅峰榜</span><br /><span class="topranktitle"
              >流行指数</span
            ><br /><br /><span class="--">——</span>
            <p
              v-for="(music, index) in newMusicRank"
              :key="index"
              style="
                font-size: 16px;
                color: white;
                text-align: left;
                margin-left: 20px;
              "
            >
              <span>{{ index + 1 }} {{ music.music_name }}</span
              ><br /><span style="margin-left: 13px">{{ music.player }}</span>
            </p></el-main
          ><el-main width="" class="rank" style="background-color: #61b2be"
            ><span class="toprank">巅峰榜</span><br /><span class="topranktitle"
              >欧美</span
            ><br /><br /><span class="--">——</span>
            <p
              v-for="(music, index) in newMusicRank"
              :key="index"
              style="
                font-size: 16px;
                color: white;
                text-align: left;
                margin-left: 20px;
              "
            >
              <span>{{ index + 1 }} {{ music.music_name }}</span
              ><br /><span style="margin-left: 13px">{{ music.player }}</span>
            </p></el-main
          ><el-main width="" class="rank_right"
            ><span style="width: 52px; margin: 0 auto; line-height: 56px"
              >排行榜</span
            ></el-main
          ></el-container
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      listRecommend: [
        {
          cover: require("../../assets/img/peiki.png"),
          listTitle: "插曲",
          listPlayNum: "2345w",
          music: [
            { music_name: "Peppa Pig", music_describe: "《粉红猪小妹》片头曲" },
            { music_name: "Peppa Pig", music_describe: "《粉红猪小妹》片头曲" },
            { music_name: "Peppa Pig", music_describe: "《粉红猪小妹》片头曲" },
            { music_name: "Peppa Pig", music_describe: "《粉红猪小妹》片头曲" },
            { music_name: "Peppa Pig", music_describe: "《粉红猪小妹》片头曲" },
          ],
        },
        {
          cover: require("../../assets/img/peiki.png"),
          listTitle: "插曲",
          listPlayNum: "2345w",
          music: [
            { music_name: "Peppa Pig", music_describe: "《粉红猪小妹》片头曲" },
            { music_name: "Peppa Pig", music_describe: "《粉红猪小妹》片头曲" },
            { music_name: "Peppa Pig", music_describe: "《粉红猪小妹》片头曲" },
            { music_name: "Peppa Pig", music_describe: "《粉红猪小妹》片头曲" },
            { music_name: "Peppa Pig", music_describe: "《粉红猪小妹》片头曲" },
          ],
        },
      ],
      newMusicRecommend: [
        {
          cover: require("../../assets/img/peiki.png"),
          music_name: "眼泪落下之前",
          player: "汪苏泷",
        },
        {
          cover: require("../../assets/img/peiki.png"),
          music_name: "眼泪落下之前",
          player: "汪苏泷",
        },
        {
          cover: require("../../assets/img/peiki.png"),
          music_name: "眼泪落下之前",
          player: "汪苏泷",
        },
      ],
      newMusicRank: [
        { music_name: "眼泪落下之前", player: "汪苏泷" },
        { music_name: "眼泪落下之前", player: "汪苏泷" },
        { music_name: "眼泪落下之前", player: "汪苏泷" },
      ],
    };
  },
};
</script>

<style scoped>
.-- {
  color: white;
}
.topranktitle {
  color: white;
  font-size: 20px;
}
.toprank {
  color: white;
  font-size: 18px;
}
.head {
  text-align: center;
  width: 100%;
  height: 1755px;
  background: #cff5f9;
}
.topic {
  width: 1350px;
  height: 340px;
  background: #cff5f9;
  border-radius: 0px 0px 0px 0px;
  margin: 0 auto;
}
.linktitle {
  color: #435baa;
  font-size: 20px;
}
.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
.homesearch {
  margin-top: 10px;
  margin-bottom: 20px;
  width: 300px;
  height: 50px;
  border-radius: 40px 40px 40px 40px;
  border: 0.3px solid #8dd8e3;
  font-size: 20px;
}
.homesearch::-webkit-input-placeholder {
  font-size: 20px;
  vertical-align: center;
  line-height: 40px;
  text-indent: 2em;
}
.homesearch:focus {
  outline: none;
  border: 0.5px solid #8dd8e3;
  text-indent: 2em;
  color: #8dd8e3;
}
.el-row {
  width: 300px;
  /* margin-left: -20px; */
  margin: 0 auto;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.topic1 {
  height: 500px;
  width: 100%;
  background-color: #8dd8e3;
  border-radius: 0px 0px 0px 0px;
  text-align: center;
}
.topic3 {
  height: 500px;
  width: 100%;
  background-color: #8dd8e3;
  border-radius: 0px 0px 0px 0px;
  text-align: center;
  margin-bottom: 60px;
}
.listrecommend {
  width: 1250px;
  /* background-color: #8dd8e3; */
  margin: 0 auto;
  height: 500px;
}
.listrecommendtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
  font-size: 50px;
  width: 30%;
  opacity: 51%;
}
.rank_right {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
  font-size: 50px;
  width: 20%;
  font-weight: bold;
}
.rank {
  /* display: flex;
  align-items: center;
  justify-content: center; */
  height: 450px;
  border-radius: 30px 30px 30px 30px;
  margin-top: 25px;
  margin-left: 40px;
}
.recommendlist1 {
  width: 90%;
  height: 220px;
  border-radius: 20px 20px 20px 20px;
  background-color: white;
  margin-top: 20px;
}
.recommendlist2 {
  width: 90%;
  height: 220px;
  border-radius: 20px 20px 20px 20px;
  background-color: white;
  margin-top: 200px;
}
.listcover {
  width: 180px;
  height: 180px;
}
.listmusic {
  text-align: left;
}
.listtitle {
  margin-top: 0px;
  font-size: 18px;
  opacity: 70%;
}
.playnum {
  margin-top: -15px;
  font-size: 14px;
  opacity: 40%;
}
.music {
  margin-top: -15px;
  margin-bottom: 20px;
  font-size: 16px;
  opacity: 70%;
}
.music_desc {
  opacity: 40%;
}
.topic2 {
  width: 1200px;
  height: 340px;
  background: #cff5f9;
  border-radius: 0px 0px 0px 0px;
  margin: 0 auto;
}
.newmusicbox {
  /*盒模型*/
  display: -webkit-box;
  display: -moz-box;

  /*横向or纵向*/
  -webkit-box-orient: horizontal; /*属性值：[horizontal]横向/[vertical]纵向*/
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  text-align: center;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.newmusic {
  /*占有比例*/
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  margin: 0 auto;
}
.newmusiccontent {
  /* text-align: left; */
  /* display: flex; */
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}
</style>